<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
        .pic{
            transform: skew(30deg,20deg);
            -webkit-transform:skew(30deg,20deg);

        }
        .pic1{
           transform: rotate(60deg) translate(100px,100px) skew(30deg,20deg);
            -webkit-transform:rotate(60deg) translate(100px,100px) skew(30deg,20deg);

        }
        .pic2{
            transform: matrix(1, 0, 0, 1, 30, 30);
            /*
                矩形方阵：最后两个参数控制移动效果
                如果想要实现放大缩小：第一个参数控制x轴放大缩小    第四个参数控制y轴放大缩小
            */
            -webkit-transform:matrix(2, 0, 0, 1, 30, 30);
        }

    </style>
</head>
<body>
<div id="box">
    <img   src="img/tx.jpg" id="image"/>
</div>
<input type="button" value="翻转变形" onclick="fn()">
<input type="button" value="旋转，移动" onclick="fn1()">
<input type="button" value="matrix矩形方阵" onclick="fn2()">
<script type="text/javascript">
    function fn(){
        var image=document.getElementById("image");
        image.className="pic";
    }
    function fn1(){
        var image=document.getElementById("image");
        image.className="pic1";
    }
    function fn2(){
        var image=document.getElementById("image");
        image.className="pic2";
    }
    //transform:移动tranlate(x轴坐标，y轴坐标)   translateX()   translateY()
      //        旋转rotate(deg)-----正值（顺时针旋转）   负值（逆时针旋转）
    //         放大缩小scale(x轴，y轴)    值>1  放大   值0-1缩小    scaleX()   scaleY()
    //          翻转变形  skew(x轴deg，y轴deg)   skewX()    skewY()
 </script>
</body>
</html>